<template>
  <div class="app-main-content-box">
    <el-form
      ref="form"
      v-loading="loading"
      :model="form"
      :rules="rules"
      label-width="130px"
      size="small"
    >
      <!-- 启用按钮 -->
      <el-form-item label="启用积分功能：">
        <el-switch v-model="form.enablePoints" :disabled="defaultForm.enablePoints" />
      </el-form-item>

      <!-- 配置区  -->
      <!-- <el-form-item> -->
      <el-collapse-transition>
        <div v-if="form.enablePoints">
          <!-- 获取后生效时间 -->
          <!-- <el-form-item label="积分到账时间：">
            <el-select v-model="form.bonusDelay" placeholder="请选择">
              <el-option
                v-for="item in bonusDelayOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item> -->

          <!-- 积分定期清零 -->
          <el-form-item label="积分定期清零：" class="is-required">
            <el-select v-model="form.expireStrategy" placeholder="请选择">
              <el-option
                v-for="item in expireStrategyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <!-- 积分定期清零 -->
          <el-form-item v-if="form.expireStrategy===1" label="清零日期：" prop="clearDate">
            <el-cascader v-model="form.clearDate" placeholder="请选择日期" :options="clearDateOptions" />
          </el-form-item>
        </div>
      </el-collapse-transition>
      <!-- </el-form-item> -->
      <el-form-item>
        <el-button type="primary" round @click="onSubmit">保 存</el-button>
        <el-button round @click="reset">重 置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { updatePointsConfig } from '@/api/points'
export default {
  props: {
    tabName: {
      type: String,
      require: true
    },
    form: {
      type: Object,
      require: true
    },
    defaultForm: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      /**
         * 表单校验字段相关
         */
      rules: {
        clearDate: [
          {
            required: true,
            message: '请选择清零日期',
            trigger: ['change']
          }
        ]
      },
      // 配置
      day: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
      clearDateOptions: [],
      bonusDelayOptions: [
        {
          value: 0,
          label: '立即到账'
        },
        {
          value: 1,
          label: '第二天到账'
        }
      ],
      expireStrategyOptions: [
        {
          value: 0,
          label: '永久不清零'
        },
        {
          value: 1,
          label: '定期清零上一年的积分'
        }
      ],
      // 状态
      loading: false
    }
  },
  watch: {
    tabName(val) {
      if (val === 'config') {
      }
    }
  },
  mounted() {
    // 获取月日选项
    this.day.forEach((v, i) => {
      // 如果i是小于10 补0
      if (i + 1 < 10) {
        var month = '0' + (i + 1)
      } else {
        var month = i + 1
      }
      this.clearDateOptions.push({
        value: `${month}`,
        label: `${i + 1}月`,
        children: []
      })
      for (let d = 1; d <= v; d++) {
        // 如果d是小于10 补0
        if (d < 10) {
          var day = '0' + d
        } else {
          var day = d
        }
        this.clearDateOptions[i].children.push({
          value: `${day}`,
          label: `${d}号`
        })
      }
    })
  },
  methods: {
    /**
       * 获取数据
       */
    reset() {
      this.$emit('initData')
    },
    /**
       *  按钮组
       */
    // 保存
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const params = {}
          params.enablePoints = this.form.enablePoints
          params.id = this.form.id
          params.bonusDelay = this.form.bonusDelay
          params.expireStrategy = this.form.expireStrategy
          // 如果清零格式化日期数据
          if (params.expireStrategy === 1) {
            params.clearDate = this.form.clearDate.join('-')
          }
          this.loading = true
          updatePointsConfig(params).then(res => {
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000,
              offset: 40
            })
            this.$root.$emit('pointsResetConfig', res.data)
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
